import { dynamicCSS } from './dynamicCss.js';
import { verify } from './verify.js';
import { rules } from './rules.js';
// 加载样式表
dynamicCSS('/css/input.css');

// 单行文本输入框组件
var input = function (options, layout) {
	// 合并参数
	this.options = $.extend({}, {
		size: 'normal',
		verify: {
			text: '',
			rules: []
		},
		readonly: false,
		placeholder: '',
		default: null,
		onChange: function () { },
		onError: function () { },
	}, options);
	var _this = this;
	this.layout = layout;
	// 主要元素
	this.html = $('<input spellcheck="false" class="form_input ' + this.options.size + '" />');

	// 事件集合
	this.event = {
		change: this.options.onChange,
		error: this.options.onError
	};

	// 绑定change方法(支持拼音输入法)
	this.html.unbind().bind('input propertychange', function () {
		_this.change();
		// _this.changeEvent(_this);
	});

	// 默认值
	this.value = null;

	// 兼容IE 的 placeHolder
	if (!!(this.options.placeholder) && !('placeholder' in document.createElement('input'))) {
		this.html.val(this.html.attr('placeholder', _this.options.placeholder));
		this.html.val(this.html.attr('placeholder')).addClass('ie-placeholder');
		this.html.bind('focus', function () {
			if (_this.html.val() == _this.html.attr('placeholder')) {
				_this.html.val("").removeClass('ie-placeholder');
			}
		}).bind('blur', function () {
			if (_this.html.val().length == 0) {
				_this.html.val(_this.html.attr('placeholder')).addClass('ie-placeholder');
			}
		});
	} else {
		this.html.attr('placeholder', this.options.placeholder);
	};
	// 初始化中,生成元素是否只读
	this.readonly(this.options.readonly);
	// 添加默认值
	this.set(this.options.default);
	// 储存错误信息
	this.errorMessage = null;
	// 如果在 Form 对象中,则直接输出,不用Render(); 
	if (this.layout) {
		this.layout.append(this.html);
	};

};

// 绑定事件集合方法
input.prototype.on = function (str, event) {
	if (this.event.hasOwnProperty(str)) {
		this.event[str] = event;
	};
	return this;
};

// 单独绑定 change 方法
input.prototype.onChange = function (event) {
	this.event.change = event;
	return this;
};

// 单独绑定 error 方法
input.prototype.onError = function (event) {
	this.event.error = event;
	return this;
};

// 当值发生变化时
input.prototype.change = function () {
	// 改变变量作用域,使调用函数可以使用 this 方法
	this.value = this.html.val();
	this.event.change.apply(this, [this.html.val()]);
	// 执行验证方法
	this.verify();
	return this;
};

input.prototype.verify = function () {
	var text = rules(this.options.verify, this.html.val());
	// 父级模板的显示错误信息及关闭错误信息
	if (this.layout) {
		if (text) {
			this.event.error.apply(this, [text, this.html.val()]);
			this.layout.showError(text);
			this.errorMessage = text;
		} else {
			this.layout.hideError();
			this.errorMessage = null;
		}
	} else {
		// 如果错误信息不为空,则触发error方法,并保留错误信息
		if (text) {
			this.event.error.apply(this, [text, this.html.val()]);
			this.errorMessage = text;
		} else {
			// 如果错误信息为空,侧清空错误信息
			this.errorMessage = null;
		};
	};
	return this;
};

// 操作元素是否只读
input.prototype.readonly = function (isReadonly) {
	var _isReadonly = null;
	if (verify.is(isReadonly) == 'function') {
		_isReadonly = isReadonly();
	};
	_isReadonly = !!isReadonly;
	if (_isReadonly) {
		this.html.attr('readonly', 'readonly');
		this.html.addClass('readonly');
	} else {
		this.html.attr('readonly', _isReadonly);
		this.html.removeClass('readonly');
	};
	return this;
};

// 为输入框赋值
input.prototype.set = function (data, doChange) {
	if (data === null) {
		return;
	};
	this.value = data;
	this.html.val(data);
	if (doChange) {
		this.change();
	};
	return this;
};

// 取值方法
input.prototype.get = function (callBack, ignore) {
	if (ignore) {
		callBack(this.value);
	} else {
		this.verify();
		if (this.errorMessage) {
			callBack(this.errorMessage);
		} else {
			callBack(false, this.value);
		};
	};
	return this;
};

export { input };